<template>
	<view class="setProfit-container">
		<!-- 自定义导航栏 -->
		<u-navbar title="设置分润" :border-bottom="false" title-size="28" back-icon-color="#fff" title-color="#fff" :background="{ background: 'transparent' }"></u-navbar>
		
		<view class="form-box">
			<view class="form-item">
				<view class="label">商户显示收益</view>
				<view class="value-box">
					<text class="value">{{ ProfitDetail.businessCommission }}%</text>
				</view>
			</view>
			<view class="form-item">
				<view class="label">绑定商户</view>
				<view class="value-box">
					<text class="value">{{ ProfitDetail.name }}</text>
				</view>
			</view>
			<view class="form-item">
				<view class="label">选择开始时间</view>
				<view @click="openDatePicker" class="value-box">
					<text v-if="!pageForm.startDate" class="fakePlaceholder">请选择开始时间</text>
					<text v-else class="value">{{ pageForm.startDate }}</text>
					<image src="@/static/go-icon2.png" class="goIcon"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">商户实际收益</view>
				<view class="value-box">
					<input v-model="pageForm.realIncome" placeholder="请输入" type="number" placeholder-class="place-holder" class="positionInput" />
				</view>
			</view>
			<view class="tips">输入不得超过显示收益</view>
		
			<!-- 保存按钮 -->
			<view class="save-btn-box">
				<view @click="confirm" class="save-btn">确认</view>
			</view>
		</view>
	</view>
	
	<!-- 选择时间日历 -->
	<u-calendar v-model="dateShow" @change="dateChange" mode="date" :min-date="minDate" :max-date="maxDate" border-radius="48" :btnCustomStyle="{ background: '#00C582' }" active-bg-color="#00C582" range-bg-color="rgba(0, 197, 130, .1)" range-color="#00C582" :safe-area-inset-bottom="true"></u-calendar>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getStoreProfitDetail, updateStoreProfit } from '@/api/myStore.js'

onLoad((options) => {
	storeId.value = options.id;
	queryProfitDetail(options.id);
});

const storeId = ref('');

// 查询商户分润详情
const ProfitDetail = ref({});
const queryProfitDetail = async (id) => {
	let res = await getStoreProfitDetail({ id });
	
	if (res.code == 200) {
		ProfitDetail.value = res.data;
		
		pageForm.value.showIncome = res.data.businessCommission;
		pageForm.value.store = res.data.name;
		pageForm.value.startDate = res.data.stealTime;
		pageForm.value.realIncome = res.data.actualCommission;
	}
}

// 确认修改分润
const confirm = async () => {
	if (!pageForm.value.startDate) {
		uni.showToast({
			title: '请选择开始时间',
			icon: 'none'
		})
		return;
	}
	
	if (!pageForm.value.realIncome) {
		uni.showToast({
			title: '请输入实际收益',
			icon: 'none'
		})
		return;
	}
	
	if (Number(pageForm.value.realIncome) > Number(pageForm.value.showIncome)) {
		uni.showToast({
			title: '实际收益不能大于显示收益',
			icon: 'none'
		})
		return;
	}
	
	let res = await updateStoreProfit({
		id: storeId.value,
		stealTime: pageForm.value.startDate,
		actualCommission: pageForm.value.realIncome
	})
	
	if (res.code == 200) {
		uni.showToast({
			title: '修改成功',
			icon: 'none'
		})
		setTimeout(() => {
			uni.navigateBack();
		}, 1000)
	}
};

// 页面表单绑定的数据
const pageForm = ref({
	showIncome: '',
	store: '',
	startDate: '',
	realIncome: '',
})

// 打开日历
const minDate = ref('');
const maxDate = ref('');
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
minDate.value = year + '-' + month + '-' + day;
maxDate.value = '2099-12-30'
const dateShow = ref(false);
const openDatePicker = () => {
	dateShow.value = true;
}

// 选择日期
const dateChange = (e) => {
	console.log(e);
	pageForm.value.startDate = e.result;
};
</script>

<style lang="scss" scoped>
.setProfit-container {
	height: 100vh;
	background-image: url('~@/static/setProfit/page-bg.png');
	background-size: 100% 598rpx;
	background-repeat: no-repeat;
	
	.form-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1086rpx;
		padding: 48rpx 40rpx 0;
		border-radius: 48rpx 48rpx 0 0;
		background-color: #fff;
		
		.form-item {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			height: 104rpx;
			border-bottom: 2rpx solid #f0f0f0;
			
			.label {
				white-space: nowrap;
				min-width: 6em;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
			}
			
			.value-box {
				display: flex;
				gap: 14rpx;
				flex-wrap: nowrap;
				align-items: center;
				
				.fakePlaceholder,.value {
					color: #ccc;
					font-size: 28rpx;
					line-height: 40rpx;
				}
				
				.value {
					color: #333;
				}
				
				.positionInput {
					text-align: right !important;
					font-size: 28rpx;
				}
				
				.goIcon {
					width: 10rpx;
					height: 16rpx;
				}
				
				.scanIcon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	
		.tips {
			color: #999;
			font-size: 20rpx;
			line-height: 36rpx;
			margin-top: 24rpx;
		}
	
		.save-btn-box {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			height: 190rpx;
			
			.save-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 646rpx;
				height: 98rpx;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 96rpx;
				background-color: $uni-main-color;
			}
		}
	}
}

:deep(.place-holder) {
	color: #ccc !important;
	font-size: 28rpx;
}

:deep(.u-btn--primary--disabled) {
	border-color: rgba(0, 197, 130, .5) !important;
	background-color: rgba(0, 197, 130, .5) !important;
}
</style>
